<script>
import mapData from '@/assets/world.json'

export default {
    props:["flag_1"],
    render: function(createElement) {
        return createElement("div", {
        attrs: {
            id: "world"
        },
        style: {
            height: "600px"
        }
        });
    },
    data(){
        return {
            mapData,
            dataList:[],
            max: ''
        }
    },
    methods: {
        initEchart() {
            // if(this.flag_1 == 0) {
            //     this.max = 200
            // } else if (this.flag_1 == 1) {
            //     this.max = 1000
            // }
            var myChart = echarts.init(document.getElementById('world'));
            var option = {
                tooltip: {
                    //数据格式化
                    formatter:function(params, callback){
                        console.log(params)
                        return params.seriesName+'<br />'+params.name+'：'+params.value
                    }
                },
                visualMap: {
                    min: 0,
                    max: this.max,
                    left: 'left',
                    top: 'bottom',
                    text: ['高','低'],//取值范围的文字
                    inRange: {
                        color: ['#e0ffff', 'red']//取值范围的颜色
                    },
                    show:true//图注
                },
                geo: {
                    map: 'world',
                    roam: false,//不开启缩放和平移
                    zoom:1.23,//视角缩放比例
                    label: {
                        normal: {
                            show: true,
                            fontSize:'10',
                            color: 'rgba(0,0,0,0.7)'
                        }
                    },
                    itemStyle: {
                        normal:{
                            borderColor: 'rgba(0, 0, 0, 0.2)'
                        },
                        emphasis:{
                            areaColor: 'yellow',//鼠标选择区域颜色
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                // 鼠标悬浮提示框
                series : [
                    {
                        name: '省份',
                        type: 'map',
                        name: '世界地图',
                        mapType: 'world', // 地图类型
                        // 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
                        roam: true,
                        // 图形上的文本标签
                        label: {
                        show: false // 是否显示对应地名
                        },
                        geoIndex: 0,
                        data:this.dataList
                    }
                ]
            };
            myChart.setOption(option);
            myChart.on('click', function (params) {
                alert(params.name);
            });
        },
        // 
        changeData(val) {
            console.log(this.mapData,'[[[[[');
            if(val == 0) {
                // 现有映射
                let res = this.mapData.data.map((item)=>{
                    return {
                        name:item.name,
                        value:item.econNum
                    }
                })
                this.dataList = res;
                console.log(this.dataList)
            } else if(val == 1) {
                // 累计映射
                let res = this.mapData.data.map((item)=>{
                    return {
                        name:item.name,
                        value:item.value
                    }
                })
                this.dataList = res;

            }
            
        }
    },
    watch: {
        flag_1: {
            handler() {
                this.changeData(this.flag_1)
                this.initEchart()
            },
            deep: true
        }
    },
    mounted() {
        // 映射
        this.changeData(0)
        this.initEchart();
    }
};
</script>
